<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑马学习-学成在线</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- header头部样式，wrapper负责版心效果 -->
    <div class="header wrapper">
        <!-- 头部左边logo -->
        <div class="logo">
            <a href="index.html"><img src="images/logo.png" alt="学成在线导航" title="学成在线"></a>
        </div>
        <!-- 头部中间导航 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <!-- 头部中间搜索栏 -->
        <div class="search">
            <input type="text" placeholder="搜索"><button></button>
        </div>
        <!-- 头部用户头像 -->
        <div class="user">
            <img src="./images/user.png">
            <span>zhangsan</span>
        </div>
    </div>
    <!-- 中间轮播图部分 -->
    <div class="banner">
        <div class="wrapper">
            <div class="left">
                <ul>
                    <li><a href="#">前端开发<span>></span></a></li>
                    <li><a href="#">后端开发<span>></span></a></li>
                    <li><a href="#">前端开发<span>></span></a></li>
                    <li><a href="#">前端开发<span>></span></a></li>
                    <li><a href="#">前端开发<span>></span></a></li>
                    <li><a href="#">前端开发<span>></span></a></li>
                    <li><a href="#">前端开发<span>></span></a></li>
                    <li><a href="#">前端开发<span>></span></a></li>
                    <li><a href="#">前端开发<span>></span></a></li>
                </ul>
            </div>
            <div class="right">
                <h2>我的课程表</h2>
                <div class="content">
                    <dl>
                        <dt>继续学习 程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl>
                    <dl>
                        <dt>继续学习 程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl>
                    <dl>
                        <dt>继续学习 程序语言设计</dt>
                        <dd>正在学习-使用对象</dd>
                    </dl>
                </div>
                <a href="#" class="more">全部课程</a>
            </div>
        </div>
    </div>
    <!-- 精品推荐 -->
    <div class="recommend wrapper">
        <h2>精品推荐</h2>
        <ul>
            <li><a href="#">JQuery</a></li>
            <li><a href="#">Spark</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">JavaWeb</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">JavaWeb</a></li>
        </ul>
        <a href="#" class="hobby">修改推荐</a>
    </div>
    <!-- 精品课程 -->
    <div class="course wrapper">
        <!-- 标题 -->
        <div class="title">
            <h2>精品推荐</h2>
            <a href="#">更多推荐</a>
        </div>
        <!-- 课程内容 -->
        <div class="content clearfic">
            <ul>
                <li>
                    <a href="#">
                        <img src="images/course04.png">
                        <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                        <p><span>高级</span>  .   1125人在学习</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/course02.png">
                        <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                        <p><span>高级</span>  .   1125人在学习</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/course03.png">
                        <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                        <p><span>高级</span>  .   1125人在学习</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/course04.png">
                        <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                        <p><span>高级</span>  .   1125人在学习</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/course05.png">
                        <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                        <p><span>高级</span>  .   1125人在学习</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/course06.png">
                        <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                        <p><span>高级</span>  .   1125人在学习</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/course07.png">
                        <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                        <p><span>高级</span>  .   1125人在学习</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/course08.png">
                        <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                        <p><span>高级</span>  .   1125人在学习</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/course02.png">
                        <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                        <p><span>高级</span>  .   1125人在学习</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/course03.png">
                        <h3>Think PHP 5.0 博客系统实战项目演练</h3>
                        <p><span>高级</span>  .   1125人在学习</p>
                    </a>
                </li>
               
            </ul>
        </div>
    </div>
    <!-- 版权 -->
    <div class="footer">
        <div class="wrapper">
            <div class="left">
                <img src="images/logo.png">
                <p>学成在线学成在线学成在线学成在线学成在线学成在线学成在线。<br>
                    学成在线学成在线学成在线学成在线学成在线学成在线学成在线学成在线学成在线.<br>
                    2023年学成在线学成在线学成在线学成在线www.com</p>
                    <a href="#">下载APP</a>
            </div>
            <div class="right">
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作方</a></dd>
                    <dd><a href="#">张三</a></dd>
                    <dd><a href="#">李四</a></dd>
                </dl>
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作方</a></dd>
                    <dd><a href="#">张三</a></dd>
                    <dd><a href="#">李四</a></dd>
                </dl>
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作方</a></dd>
                    <dd><a href="#">张三</a></dd>
                    <dd><a href="#">李四</a></dd>
                </dl>
            </div>
        </div>
    </div>
</body>

</html>